<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="">

    <title>cesium</title>
    <style>
        .header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100px;
            background-color: darkcyan;
        }
        
        #earth {
            position: absolute;
            top: 100px;
            bottom: 0;
            right: 0;
            left: 0;
            overflow: hidden;
            margin: 0;
            padding: 0;
            /* background-color: aqua; */
        }
        
        .logo {
            width: 100px;
            height: 100px;
        }
        
        .logo img {
            width: 100%;
            height: 100%;
        }
        
        .nav {
            position: absolute;
            left: 100px;
            right: 0;
            bottom: 0;
            top: 0;
            /* height: 100px;
            width: 800px; */
        }
        
        .menu {
            position: relative;
            width: 960px;
            height: 100px;
            margin: 0 auto;
            background-color: #ccc;
        }
        
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .all {
            position: absolute;
            width: 330px;
            height: 70px;
            margin: 0 auto;
            background-color: #235EA4;
            padding-left: 10px;
            padding-top: 30px;
        }
        
        .all li {
            width: 100px;
            height: 40px;
            background-color: #235EA4;
            line-height: 40px;
            text-align: center;
            float: left;
            border-right: 1px solid #CCC;
            display: inline;
            position: relative;
            cursor: pointer;
        }
        
        .all ul {
            position: absolute;
            left: 0;
            top: 60px;
            display: none;
        }
    </style>
</head>

<body>
    <div id="earth"></div>
    <div id="heard" class="header">
        <div class="logo"><img src="../src/img/logo.png" alt="领航遥感" /></div>
        <div class="nav">
            <div class="menu">
                <ul class="all">
                    <li>主页
                        <!-- <ul>
                            <li>二级菜单</li>
                            <li>二级菜单</li>
                            <li>二级菜单</li>
                        </ul> -->
                    </li>
                    <li>功能
                        <ul>
                            <li>测试</li>
                            <li>测试</li>
                            <li>测试</li>
                        </ul>
                    </li>
                    <li>一级菜单
                        <ul>
                            <li>测试</li>
                            <li>测试</li>
                            <li>测试</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>




</body>
<script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>

<link href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $(() => {
        $('.all>li').hover(function(e) {
            $(this).children().stop().slideToggle()
        });
        console.log(111);
        var viewer = new Cesium.Viewer('earth')
    })
</script>
<!-- <script src="./main.js"></script> -->

</html>